<template>
    <div>
        <div id="example-1">
            <button type="button" v-on:click="counter += 1">Add 1</button>
            <p>The button above has been clicked {{ counter }} times.</p>
        </div>
        <div id="example-2">
            <button type="button" v-on:click="greet">Greet</button>
        </div>
        <div id="example-3">
            <button type="button" v-on:click="say('Hi')">SayHi</button>
            <button type="button" v-on:click="say('what')">SayWhat</button>
            <button type="button" v-on:click="warn('HelloWorld',$event)">Submit</button>
        </div>
        <div id="example-4">
            事件修饰符:<br/>
            <a v-on:click.stop="doThis">stop阻止事件继续传播</a>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'

@Component({})
export default class EventHandlingExample extends Vue {
    name = 'Vue.js';
    counter = 0;
    public greet(event:any){
        alert("Hello," + this.name + "!");
        if (event) {
            alert(event.target.tabName);
        }
    }

    public say(message:string){
        alert(message);
    }

    public warn(message:string,event:any){
        if (event) {
            event.preventDefault();
        }
        alert(message);
        console.log(event);
    }

    public doThis(){
        console.log("doThis");
    }
}
</script>

<style scoped>
div{
    margin-top:20px;
    text-align:center;
    margin-left: 10px;
}
</style>
